/* eslint-disable react/prop-types */
import React from 'react';
import { Form, Input, Button } from 'antd';
import style from './Find.module.scss';
import Verify from '@/components/verify/index'

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};
class FindForm extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleSubmit(e) {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSubmit} {...formItemLayout}>
        <Form.Item label="用户手机号：">
          {getFieldDecorator('mobile', {
            rules: [
              {
                required: true,
                message: '请输入手机号',
              },
            ],
          })(<Input placeholder="手机号" size="large" />)}
        </Form.Item>
        <Form.Item label="手机验证码：">
          {getFieldDecorator('authcode', {
            rules: [
              {
                required: true,
                message: '请输入手机验证码',
              },
            ],
          })(<Input placeholder="手机验证码" size="large" style={{ width: '500px' }} />)}
          <span className={style.getAuth}>获取验证码</span>
        </Form.Item>
        <Form.Item label="新密码：">
          {getFieldDecorator('password', {
            rules: [
              {
                required: true,
                message: '请输入密码',
              },
            ],
          })(<Input placeholder="密码" size="large" />)}
        </Form.Item>
        <Form.Item label="确认密码：">
          {getFieldDecorator('repassword', {
            rules: [
              {
                required: true,
                message: '请输入密码',
              },
            ],
          })(<Input placeholder="确认密码" size="large" />)}
        </Form.Item>
        <Form.Item label="校验：">
          <Verify></Verify>
        </Form.Item>
        <div className={style.find_btn_box}>
          <Button type="primary" htmlType="submit" size="large">提交</Button>
        </div>
      </Form>
    )
  }
}

export default Form.create()(FindForm)